<template>
  <div class="wrapper">
   <div class="wrapper1">
    <img src="../../assets/img/kefu/zhanghutixian/zuanshi.png" alt="">

    <p>¥2000</p>
    <p>我的金额</p>
    <p @click="doclick">提现</p>
   </div>


    <!--弹窗部分-->
    <div class="window" v-if="isShow">
       <nav class="top">
         <p>请选择提现方式</p>
       </nav>
       <div>
         <!--第一个-->
         <div class="tixian">
         <img src="../../assets/img/kefu/zhanghutixian/tuoyuan3.png" alt="" @click="weiXin" v-show="isOpen">
           <img src="../../assets/img/kefu/zhanghutixian/duihao.png" alt="" @click="weiXin" v-show="isOpentwo">
         <span>提现到微信</span>
         <div>(提现到微信,手续费率为0.29,额外扣除10%服务费2-3个工作日到账)</div>
         </div>
         <!--第二个-->
         <div class="tixian">
           <img src="../../assets/img/kefu/zhanghutixian/tuoyuan3.png" alt="" @click="zhiFu" v-show="isOpentwo" >
           <img src="../../assets/img/kefu/zhanghutixian/duihao.png" alt="" @click="zhiFu" v-show="isOpen">
           <span>提现到支付宝</span>
           <div>(提现到支付宝,手续费率为0.36,额外扣除10%服务费4-6个工作日到账)</div>
         </div>
         <!--下面提现 取消-->
         <div class="put">
           <p class="put1" @click="doClickOne">提现</p>
           <p class="put2" @click="doClickOne">取消</p>
         </div>
       </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        isShow:false,
        isOpen:true,
        isOpentwo: false,
      }
    },
       methods:{
      doclick(){
        this.isShow = ! this.isShow;

      },
      doClickOne(){
        this.isShow = ! this.isShow;
      },
         weiXin(){
          this.isOpen =! this.isOpen;
           this.isOpentwo =! this.isOpentwo;
         },
         zhiFu(){
           this.isOpen =! this.isOpen;
           this.isOpentwo =! this.isOpentwo;
         }
    }
  }
</script>
<style scoped>

   .wrapper1 {
     /*适用于块属性标签,整个标签居中*/
     /*margin: 0 auto;*/
     /*标签内容居中*/
     text-align: center;
   }
  .wrapper1 p{
    font-size:0.5rem;
  }
  div p:nth-child(2){
    color: red;
    font-weight:100;
  }
  div p:nth-child(3){
    font-weight:200;
  }
  div p:nth-child(4){
    font-weight:200;
    width:7rem;
    height:1rem;
    color: white;
    background: dodgerblue;
    margin:0 auto;
    margin-top: 1.5rem;
    vertical-align: center;
  }

  /*弹窗部分*/
  .top{
    width:100%;
    height:1.9rem;
    background: #e53e42;
    text-align: center;

  }
  .top p{
    color: #ffffff;
    font-size:0.7rem;
    padding-top: 0.4rem;
    font-weight:200;

  }
  /*提现到微信*/
  .tixian span{
    font-size:0.7rem;
  }
  .tixian div{
    font-size:0.6rem;
    margin-left: 0.6rem;
  }
  /*下面提现 取消*/
   .put{
     margin: 0 auto;
   }
  .put1, .put2 {
    font-size:0.76rem;
    text-align: center;
    width: 11rem;
    height:1.3rem;

    color: #ffffff;
  }
  .put1{
    background: #61a7ea;
    margin-left: 2rem;
    margin-top: 2rem;
  }
   .put2{
     background: white;
     margin-left: 2rem;
     margin-top: 0.7rem;
     color: #4d4d4d;
   }

</style>
